<header>
    <div class="ch1">
        <section class="top">
            <img class="menu" src="<?= STATIC_PATH ?>/img/menu-white.svg">
            <h1><a href="/"><?= get_bloginfo('name'); ?></a></h1>

        </section>


        <nav class="grid">
            <?php foreach (
                get_categories(array(
                    'taxonomy'   => 'category',
                    'hide_empty' => false, // Include empty categories
                    'orderby'    => 'name',
                    'order'      => 'ASC',
                )) as $vo
            ): ?>
                <?php if (intval($vo->parent) == 0): ?>
                    <a href="/category/<?= $vo->slug ?>"><?= $vo->name ?></a>
                <?php endif; ?>
            <?php endforeach; ?>
        </nav>
    </div>
</header>

<style>
  
    header {
        background-color: var(--color-primary);
        display: grid;
        gap: 0;
        overflow: hidden;
    }

    div.ch1 {
        overflow: hidden;
    }

    div.ch1>section.top {
        display: grid;
        grid-template-columns: 4rem auto;
        grid-template-rows: 3rem;
        align-items: center;
    }

    div.ch1>section>img.menu {
        width: 2rem;
        height: 2rem;
    }
   
    div.ch1>nav {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        line-height: 4rem;
        height: 0;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        transition: height 200ms ease-out;
    }

    div.ch1>nav>a {
        color: var(--color-a);
        padding: 0 1rem;
    }

    div.ch1>nav.show {
        height: 4rem;
    }

    @media screen and (max-width: 1024px) {
        div.ch1>nav{justify-content: flex-start;}
    }
    @media screen and (max-width: 768px) {
       
    }
</style>

<script>
    const menu = document.querySelector('header>div.ch1>section>img');
    const nav = document.querySelector('header>div.ch1>nav');

    menu.addEventListener('click', () => {
        nav.classList.toggle('show');
        menu.src = nav.classList.contains("show") ? "<?= STATIC_PATH ?>/img/close-white.svg" : "<?= STATIC_PATH ?>/img/menu-white.svg";
    });
</script>